<template>
	<div>
		<ul class="flex list-menu">
			<li
				class="list-item"
				v-for="(item, index) in themeConfig"
				:key="index"
				:class="{ 'active-item': activeKey == item.id }"
				:style="{ '--v-active-theme-color': item.color }"
				@click="handleChange(item)"
			>
				<el-avatar v-if="item.imgSrc" :src="item.imgSrc" />
				<p class="theme-icon" v-else></p>
				<p>{{ item.label }}</p>
			</li>
		</ul>
		<div v-if="imgMode.id == 5">
			<uploadPage
				uploadTip="上传背景图片"
				:showFileList="false"
				:limit="1"
				:multiple="false"
				v-model="imgMode.imgSrc"
				@update:modelValue="onChange"
			></uploadPage>
		</div>
	</div>
</template>

<script setup lang="ts">
import { getStore, setStore } from '@/utils/store'
import { useCommonStore } from '@/stores/common'
import uploadPage from '@/components/AplidCrud/src/AplidUpload/index.vue'

const common = useCommonStore()
const config = getStore('themeConfig') || {}
const imgMode: any = ref(
	config.id == 5
		? config
		: {
				id: '',
				src: '',
		  }
)

const themeConfig = [
	{
		id: 1,
		label: '暗黑主题',
		color: '#000',
		config: {
			'--color-background': '',
			'--vt-aside-bg': '#000', //侧边栏
			'--vt-content-bg': '', // 内容背景
			'--vt-c-black': '#fff', // 界面背景
			'--vt-c-white': '#000', // 界面字体
			'--vt-c-menu-color': '#fff', // 侧边字体
			'--vt-c-top-menu-color': '#000', // 顶部菜单字体
			'--el-text-color-primary': '#000', // 主题字体颜色
		},
	},
	{
		id: 2,
		label: '活力蓝主题',
		color: '#77b4fe',
		config: {
			'--color-background': '',
			'--vt-aside-bg': '#77b4fe', //侧边栏
			'--vt-content-bg': '', // 内容背景
			'--vt-c-black': '#fff', // 界面背景
			'--vt-c-white': '#000', // 界面字体
			'--vt-c-menu-color': '#000', // 侧边字体
			'--vt-c-top-menu-color': '#000', // 顶部菜单字体
			'--el-text-color-primary': '#000', // 主题字体颜色
		},
	},
	{
		id: 3,
		label: '简约白主题',
		color: '#fff',
		config: {
			'--color-background': '',
			'--vt-aside-bg': '#fff', //侧边栏
			'--vt-content-bg': '', // 内容背景
			'--vt-c-black': '#fff', // 界面背景
			'--vt-c-white': '#000', // 界面字体
			'--vt-c-menu-color': '#000', // 侧边字体
			'--vt-c-top-menu-color': '#000', // 顶部菜单字体
			'--el-text-color-primary': '#000', // 主题字体颜色
		},
	},
	{
		id: 4,
		label: '流星',
		color: '#f00',
		config: {
			'--color-background': "url('https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1688365697377_c3ffe9fc.png')  no-repeat scroll 0 0", //侧边栏
			'--vt-aside-bg': 'transparent', //侧边栏
			'--vt-content-bg': 'transparent', // 内容背景
			'--vt-c-black': 'transparent', // 界面背景
			'--vt-c-white': '#fff', // 界面字体
			'--vt-c-menu-color': '#fff', // 侧边字体
			'--vt-c-top-menu-color': '#fff', // 顶部菜单字体
			'--el-text-color-primary': '#000', // 主题字体颜色
		},
	},
	{
		id: 5,
		label: '自定义',
		color: '#7c7e75',
		imgSrc: imgMode.value.imgSrc,
		config: {
			'--color-background': "url('https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1688365697377_c3ffe9fc.png')  no-repeat scroll 0 0", //侧边栏
			'--vt-aside-bg': 'transparent', //侧边栏
			'--vt-content-bg': 'transparent', // 内容背景
			'--vt-c-black': 'transparent', // 界面背景
			'--vt-c-white': '#fff', // 界面字体
			'--vt-c-menu-color': '#fff', // 侧边字体
			'--vt-c-top-menu-color': '#fff', // 顶部菜单字体
			'--el-text-color-primary': '#000', // 主题字体颜色
		},
	},
]

const activeKey = ref(config.id)
const handleChange = (item) => {
	imgMode.value = item
	activeKey.value = item.id
	if (item.id !== 5) {
		setStore('themeConfig', item, 'localstorage')
		common.setBaseColor()
	}
}

const onChange = (path) => {
	const config = {
		id: 5,
		label: '自定义',
		color: '#f00',
		imgSrc: path,
		config: {
			'--color-background': `url(${path})  no-repeat scroll 0 0`, //侧边栏
			'--vt-aside-bg': 'transparent', //侧边栏
			'--vt-content-bg': 'transparent', // 内容背景
			'--vt-c-black': 'transparent', // 界面背景
			'--vt-c-white': '#fff', // 界面字体
			'--vt-c-menu-color': '#fff', // 侧边字体
			'--vt-c-top-menu-color': '#fff', // 顶部菜单字体
		},
	}
	setStore('themeConfig', config, 'localstorage')
	common.setBaseColor()
}
</script>

<style scoped lang="scss">
:root {
	--v-active-theme-color: #e3e3e3;
}
.theme-icon {
	width: 32px;
	height: 32px;
	background: linear-gradient(45deg, var(--v-active-theme-color), transparent);
	border-radius: 50%;
	margin-right: 10px;
	border: 1px solid #ededed;
}
.list-menu {
	.active-item {
		color: #0052d9;
		border-bottom: 4px solid #0052d9;
	}
	.list-item {
		width: 120px;
		text-align: center;
		display: flex;
		flex-flow: column;
		align-items: center;
		&:hover {
			cursor: pointer;
		}
	}
}
</style>
